<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .p1{
      text-align: center;
      font: bold 60px Sans-serif;
      color: red;
      text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
      -2px -15px 11px #f80,
      2px -25px 18px #f20;
    }
    .p2{
      text-align: center;
      padding: 20px;
      margin: 0;

      font-size: 60px;
      font-weight: bold;
      color: #d1d1d1;
      background: #ccc;

      text-shadow: 0 0 .2em #f87, 0 0 0.2em #f87;

      /*text-shadow: -1px 0 black,0 1px black,0 -1px black,1px 0 black;*/
      /*text-shadow: -1px -1px #333,1px 1px white;*/
      /*text-shadow: -1px -1px white,1px 1px #333;*/
    }
  </style>
</head>
<body>

<p class="p2">文本阴影</p>

<p class="p1">文本阴影：text-shadow</p>

</body>
</html>
